<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火车票查询 - 12306风格</title>
    <!-- 引入 Element UI 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue 和 Element UI JS -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
            color: #333;
        }
        .header {
            background-color: #1E88E5;
            color: white;
            padding: 15px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .header-container {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        .nav {
            display: flex;
        }
        .nav-item {
            padding: 0 15px;
            cursor: pointer;
            position: relative;
        }
        .nav-item:hover {
            color: #FFD700;
        }
        .nav-item.active {
            color: #FFD700;
        }
        .nav-item.active:after {
            content: "";
            position: absolute;
            bottom: -15px;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: #FFD700;
        }
        .main-container {
            width: 1200px;
            margin: 20px auto;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 20px;
        }
        .search-box {
            background-color: #FF9700;
            padding: 20px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .tab-header {
            display: flex;
            border-bottom: 2px solid #FF9700;
            margin-bottom: 20px;
        }
        .tab-item {
            padding: 10px 20px;
            cursor: pointer;
            background-color: #FFF3E0;
            margin-right: 5px;
            border-radius: 5px 5px 0 0;
        }
        .tab-item.active {
            background-color: #FF9700;
            color: white;
        }
        .train-list {
            border: 1px solid #e0e0e0;
            border-radius: 5px;
        }
        .train-item {
            padding: 15px;
            border-bottom: 1px solid #e0e0e0;
        }
        .train-item:last-child {
            border-bottom: none;
        }
        .train-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        .train-number {
            color: #1E88E5;
            font-weight: bold;
            font-size: 18px;
        }
        .train-time {
            display: flex;
            align-items: center;
        }
        .time {
            font-size: 16px;
            font-weight: bold;
        }
        .duration {
            color: #999;
            margin: 0 15px;
        }
        .train-stations {
            color: #666;
        }
        .seat-row {
            display: flex;
            margin-top: 10px;
        }
        .seat-item {
            flex: 1;
            text-align: center;
            padding: 10px;
            border-right: 1px dashed #e0e0e0;
        }
        .seat-item:last-child {
            border-right: none;
        }
        .seat-name {
            color: #666;
        }
        .seat-price {
            color: #FF5722;
            font-weight: bold;
            margin: 5px 0;
        }
        .seat-num {
            color: #4CAF50;
        }
        .no-seat {
            color: #999;
        }
        .book-btn {
            background-color: #FF5722;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
        }
        .book-btn:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        .footer {
            text-align: center;
            padding: 20px;
            color: #666;
            font-size: 12px;
            margin-top: 30px;
        }
        .exchange-btn {
            background: none;
            border: none;
            color: #1E88E5;
            cursor: pointer;
            font-size: 20px;
            margin: 0 10px;
        }
        .date-tabs {
            display: flex;
            margin-top: 15px;
        }
        .date-tab {
            padding: 5px 10px;
            margin-right: 5px;
            cursor: pointer;
            border: 1px solid #e0e0e0;
            border-radius: 3px;
        }
        .date-tab.active {
            background-color: #FF9700;
            color: white;
            border-color: #FF9700;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 头部导航 -->
    <div class="header">
        <div class="header-container">
            <div class="logo">中国铁路12306</div>
            <div class="nav">
                <div class="nav-item active">车票</div>
                <div class="nav-item">酒店</div>
                <div class="nav-item">旅游</div>
                <div class="nav-item">餐饮</div>
                <div class="nav-item">商旅</div>
                <div class="nav-item">我的12306</div>
            </div>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-container">
        <!-- 搜索框 -->
        <div class="search-box">
            <el-form :model="searchForm" label-width="80px">
                <el-row :gutter="20">
                    <el-col :span="10">
                        <el-form-item label="出发地">
                            <el-input v-model="searchForm.from" placeholder="请输入出发地"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="text-align: center; line-height: 40px;">
                        <button class="exchange-btn" @click.prevent="exchangeStation">⇄</button>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="到达地">
                            <el-input v-model="searchForm.to" placeholder="请输入到达地"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="10">
                        <el-form-item label="出发日期">
                            <el-date-picker
                                    v-model="searchForm.date"
                                    type="date"
                                    placeholder="选择日期"
                                    value-format="yyyy-MM-dd"
                                    :picker-options="pickerOptions"
                                    style="width: 100%">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="车次类型">
                            <el-select v-model="searchForm.trainType" placeholder="全部" style="width: 100%">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="高铁" value="G"></el-option>
                                <el-option label="动车" value="D"></el-option>
                                <el-option label="直达" value="Z"></el-option>
                                <el-option label="特快" value="T"></el-option>
                                <el-option label="快速" value="K"></el-option>
                                <el-option label="普快" value=""></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="text-align: center; line-height: 40px;">
                        <el-button type="primary" @click="search" style="width: 100%; height: 40px;">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>

            <!-- 日期标签 -->
            <div class="date-tabs">
                <div
                        class="date-tab"
                        v-for="(day, index) in dateTabs"
                        :key="index"
                        :class="{active: searchForm.date === day.date}"
                        @click="changeDate(day.date)">
                    {{day.text}}<br>{{day.date}}
                </div>
            </div>
        </div>

        <!-- 车次列表 -->
        <div v-if="trains.length > 0">

            <div class="train-list">
                <div class="train-item" v-for="(train, index) in filteredTrains" :key="index">
                    <div class="train-header">
                        <div>
                            <span class="train-number">{{train.number}}</span>
                            <span class="train-stations">{{train.from}} → {{train.to}}</span>
                        </div>
                        <div class="train-time">
                            <span class="time">{{train.departureTime}}</span>
                            <span class="duration">{{train.duration}}</span>
                            <span class="time">{{train.endTime}}</span>
                        </div>
                    </div>
                    <div class="seat-row">
                        <div class="seat-item" v-for="(seat, seatIndex) in train.seats" :key="seatIndex">
                            <div class="seat-name">{{seat.type}}</div>
                            <div class="seat-price">¥{{seat.price}}</div>
                            <div class="seat-num" v-if="seat.remain > 0">余{{seat.remain}}张</div>
                            <div class="no-seat" v-else>无票</div>
                            <button
                                    class="book-btn"
                                    @click="book(train, seat)"
                                    :disabled="seat.remain <= 0">
                                {{seat.remain > 0 ? '预订' : '无票'}}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 无数据提示 -->
        <el-empty description="暂无车次信息" v-if="trains.length === 0 && searched"></el-empty>
    </div>

    <!-- 底部 -->
    <div class="footer">
        <p>© 2023 中国铁路12306 | 本页面为模拟演示，非官方网站</p>
    </div>

    <!-- 预订对话框 -->
    <el-dialog title="确认订单信息" :visible.sync="showDialog" width="50%">
        <el-form :model="orderForm" label-width="100px">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="车次">
                        <span>{{orderForm.trainNumber}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="出发日期">
                        <span>{{orderForm.date}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="出发站/到达站">
                        <span>{{orderForm.from}} → {{orderForm.to}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="出发/到达时间">
                        <span>{{orderForm.departureTime}} / {{orderForm.endTime}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="历时">
                        <span>{{orderForm.duration}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="座位类型">
                        <span>{{orderForm.seatType}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="票价">
                        <span style="color: #FF5722; font-weight: bold">¥{{orderForm.price}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="乘车人">
                        <el-select v-model="orderForm.passenger" placeholder="请选择乘车人" style="width: 100%">
                            <el-option
                                    v-for="(p, index) in passengers"
                                    :key="index"
                                    :label="p.name + ' (' + p.idCard + ')'"
                                    :value="p.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">取消</el-button>
                <el-button type="primary" @click="submitOrder">提交订单</el-button>
            </span>
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                searchForm: {
                    from: '北京',
                    to: '上海',
                    date: '',
                    trainType: ''
                },
                activeTab: 'all',
                trains: [],
                searched: false,
                showDialog: false,
                orderForm: {
                    trainNumber: '',
                    date: '',
                    from: '',
                    to: '',
                    departureTime: '',
                    endTime: '',
                    duration: '',
                    seatType: '',
                    price: '',
                    passenger: ''
                },
                passengers: [
                    {id: 1, name: '张三', idCard: '110101199001011234'},
                    {id: 2, name: '李四', idCard: '110101199002022345'},
                    {id: 3, name: '王五', idCard: '110101199003033456'}
                ],
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7 ||
                            time.getTime() > Date.now() + 30 * 8.64e7;
                    }
                }
            }
        },
        computed: {
            filteredTrains() {
                if (this.activeTab === 'all') {
                    return this.trains;
                }
                return this.trains.filter(train => train.number.startsWith(this.activeTab));
            },
            dateTabs() {
                const today = new Date();
                const dates = [];
                const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

                for (let i = 0; i < 5; i++) {
                    const date = new Date(today);
                    date.setDate(today.getDate() + i);
                    const month = date.getMonth() + 1;
                    const day = date.getDate();
                    const weekDay = weekDays[date.getDay()];
                    const dateStr = `${date.getFullYear()}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;

                    let text = '';
                    if (i === 0) {
                        text = '今天';
                    } else if (i === 1) {
                        text = '明天';
                    } else {
                        text = weekDay;
                    }

                    dates.push({
                        text: text,
                        date: dateStr
                    });
                }

                return dates;
            }
        },
        created() {
            // 设置默认日期为今天
            const today = new Date();
            const month = today.getMonth() + 1;
            const day = today.getDate();
            this.searchForm.date = `${today.getFullYear()}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
        },
        methods: {
            exchangeStation() {
                const temp = this.searchForm.from;
                this.searchForm.from = this.searchForm.to;
                this.searchForm.to = temp;
            },
            changeDate(date) {
                this.searchForm.date = date;
                this.search();
            },
            search() {
                // 模拟数据
                this.trains = [
                    {
                        number: 'G101',
                        from: '北京南',
                        to: '上海虹桥',
                        departureTime: '07:00',
                        endTime: '12:23',
                        duration: '5小时23分',
                        seats: [
                            { type: '商务座', price: 1748, remain: 5 },
                            { type: '一等座', price: 933, remain: 12 },
                            { type: '二等座', price: 553, remain: 20 }
                        ]
                    },
                    {
                        number: 'G103',
                        from: '北京南',
                        to: '上海虹桥',
                        departureTime: '08:00',
                        endTime: '13:23',
                        duration: '5小时23分',
                        seats: [
                            { type: '商务座', price: 1748, remain: 0 },
                            { type: '一等座', price: 933, remain: 3 },
                            { type: '二等座', price: 553, remain: 10 }
                        ]
                    },
                    {
                        number: 'D321',
                        from: '北京',
                        to: '上海',
                        departureTime: '08:30',
                        endTime: '14:45',
                        duration: '6小时15分',
                        seats: [
                            { type: '一等座', price: 588, remain: 8 },
                            { type: '二等座', price: 368, remain: 15 },
                            { type: '软卧', price: 480, remain: 0 }
                        ]
                    },
                    {
                        number: 'Z281',
                        from: '北京',
                        to: '上海',
                        departureTime: '19:10',
                        endTime: '07:08',
                        duration: '11小时58分',
                        seats: [
                            { type: '软卧', price: 480, remain: 3 },
                            { type: '硬卧', price: 310, remain: 10 },
                            { type: '硬座', price: 156, remain: 25 }
                        ]
                    },
                    {
                        number: 'T109',
                        from: '北京',
                        to: '上海',
                        departureTime: '20:05',
                        endTime: '09:38',
                        duration: '13小时33分',
                        seats: [
                            { type: '软卧', price: 430, remain: 0 },
                            { type: '硬卧', price: 280, remain: 5 },
                            { type: '硬座', price: 150, remain: 30 }
                        ]
                    }
                ];
                this.searched = true;
            },
            book(train, seat) {
                this.orderForm = {
                    trainNumber: train.number,
                    date: this.searchForm.date,
                    from: train.from,
                    to: train.to,
                    departureTime: train.departureTime,
                    endTime: train.endTime,
                    duration: train.duration,
                    seatType: seat.type,
                    price: seat.price,
                    passenger: ''
                };
                this.showDialog = true;
            },
            submitOrder() {
                this.$message.success('订单提交成功！');
                this.showDialog = false;

                // 减少余票数量
                this.trains.forEach(train => {
                    if (train.number === this.orderForm.trainNumber) {
                        train.seats.forEach(seat => {
                            if (seat.type === this.orderForm.seatType) {
                                seat.remain--;
                            }
                        });
                    }
                });
            }
        }
    });
</script>
</body>
</html>